<template>
<div class="mainBody">
  <div class="flex titleRow">
    <div class="columnLine"></div>
    <div class="title fs4">公司名称</div>
  </div>
  <div class="allRow">
    <div class="departmentRow flex"
         v-for="(item,index) in personSelectList.departmentList" :key="'department'+index"
         @click="onDepartmentClick(item)">

      <img class="img marginAuto0" src="@/assets/img/icon_mail.png">
      <p class="text fs4 marginAuto0">{{item}}</p>
    </div>
    <div class="personRow flex flex-between"
         v-for="(item,index) in personSelectList.personList" :key="'person'+index"
    @click="onPersonClick(index)">
      <div class="flex">
        <img class="img marginAuto0" src="@/assets/img/mail_photo.png">
        <p class="text fs4 marginAuto0">{{item.name}}</p>
      </div>
      <img class="chose marginAuto0" src="@/assets/img/chose.png"
      v-show="currentIndex===index">
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "mainBody",
  props:{
    personSelectList:{ //人员选择的数据
      type:Object,
      default(){
        return {
          departmentList:["部门1","部门2","部门3",],
          personList:[{name:"张三",department:"电子渠道事业部"}
            ,{name:"李四",department:"移动事业部"}
            ,{name:"王五",department:"企业创新事业部"}]
        }
      }
    }
  },
  data(){
    return{
      currentIndex:-1,
      visible:true
    }
  },
  methods:{
    onPersonClick(index){
      this.currentIndex=index;
    },
    onDepartmentClick(item){
      this.$router.push("/departmentDetail?department="+item)
    }
  }
}
</script>

<style lang="less" scoped>
.personalSelection{
  .titleRow{
    background-color: #F5F5F5;
    padding: .3rem .4rem;
    .columnLine{
      width: .12rem;
      height: .5rem;
      background-color: #409EFF;
      margin:0.05rem .2rem 0 0;
    }
    .title{
      color: #409EFF;
    }
  }
  .departmentRow,.personRow{
    padding: .35rem .4rem;
    border-bottom: .01rem solid #F5F5F5;
    .img{
      width: .65rem;
      height: .65rem;
      margin-right: .2rem;
    }
    .chose{
      width: .4rem;
      height: .4rem;
    }
  }
}
</style>